import React from 'react';
import { useState } from 'react';
import { connect } from 'react-redux';
import { Card, Breadcrumb, Select, Input, Layout, Drawer, Form,Radio, Button,message } from 'antd';
import {setOpen} from '../action/actions.js';
import {
  getComponentList,
  deleteComponent,
  getComponentType,
  addComponent,
  editComponent,
} from '../../../api/component/index';

function mapStateToProps(state) {
  return {
    openDrawer: state.openDrawer,
	componentList:state.componentList,
	componentTypeList:state.componentTypeList,
	optionType:state.optionType,
	editItem:state.editItem
  };
}

// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClose:(data)=> {
		dispatch({ type: 'OPEN_DRAWER', data: false })
    },
	changeComponent:(data)=> {
		dispatch({ type: 'CHANGE_COMPONENT', data: data })
	}
  };
};


function addItemDrawer(props) {
	
	const {Option} = Select;
	const componentItem = {};
	
		
	
	const onChangeRadio = (e) => props.editItem.shareCluster = e.target.value;
	const onChangeSelect = (e) => props.editItem.type = e;
	const onchangeInput = (e) => props.editItem.name = e.target.value;
	
	const insertComponent = (e) => {
		componentItem.id = new Date().getTime();
	    componentItem.name = e.name;
	    componentItem.type = e.type;
	    // componentItem.state = e.state;
	    componentItem.shareCluster = e.shareCluster;
	    addComponent(componentItem).then((res) => {
			console.log(res);
	      if (res.msg === "添加组件成功") {
	        message.success("添加组件成功");
			// 拼接数组
	        let arr = [];
	        arr.push(componentItem);
	        arr = arr.concat(props.componentList);
	        props.changeComponent(arr);
	        
	      }
	      props.onClose();
	    });
	  }
	
	const editComponentOne = (e) => {
		console.log("编辑");
	    let arr = props.componentList;
		
	    for (let i = 0; i < arr.length; i++) {
	      if (arr[i].id === e.id) {
	        arr[i].name = e.name;
			arr[i].shareCluster = e.shareCluster;
			editComponent(arr[i].id, e).then((res) => {
			  if (res.code === 0) {
			    message.success(res.msg);
			    // const target = arr.find((c) => c.id === addInfo.id);
			    // target.name = e.name;
			    // target.state = addInfo.state;
			    // target.shareCluster = e.shareCluster;
			   props.changeComponent(arr);
			   props.onClose();
			  } else {
			    message.error(res.msg);
			  }
			});
	        break;
	      }
	    }

	   
	  };
	
	const onSubmit = (e) => {
		console.log("e",e);
		let obj = props.editItem
		obj.name = e.name
		obj.type = e.type
		obj.shareCluster = e.shareCluster
		console.log("props.optionTpye",props.optionType);
	    if (props.optionType === "edit") {
	      editComponentOne(obj);
	    }
		if (props.optionType === "insert") {
			insertComponent(e);
		}
	};
	  
	
	const [form] = Form.useForm();
	
	console.log(props);
	return (
    <>
      <Drawer
        title={props.optionType}
        placement="right"
        onClose={props.onClose}
        visible={props.openDrawer}
      >
        <Form name="addInfo" form={form} onFinish={onSubmit}>
			<Form.Item
				initialValue={props.editItem.id}
				name="id"
				
			>
			</Form.Item>
			<Form.Item
				initialValue={props.editItem.name}
				label="组件名称"
				name="name"
				rules={[
				  { required: true, message: "Please input your ComponentName!" }
				]}
			>
			<Input onChange={onchangeInput} value={props.editItem.name} />
			</Form.Item>
			<Form.Item
				label="组件类型"
				name="type"
				rules={[
				  { required: true, message: "Please input your ComponentType!" }
				]}
			>
            <Select
              onChange={onChangeSelect}
              defaultValue={props.editItem.type}
              // disabled={props.editItem.type}
            >
              {props.componentTypeList.map((item, index) => {
                return (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="集群"
            name="Cluster"
            rules={[{ required: true, message: "Please input your Cluster!" }]}
          >
            <Radio.Group
              onChange={onChangeRadio}
              defaultValue={props.editItem.shareCluster}
            >
              <Radio value={true}>共享配置</Radio>
              <Radio value={false}>独立配置</Radio>
            </Radio.Group>
          </Form.Item>
        
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
            >
              保存
            </Button>
            <Button htmlType="button" onClick={props.onClose}>
              关闭
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </>
  );
}



export default connect(mapStateToProps, mapDispatchToProps)(addItemDrawer);
